<template>
	<div id="loginWrap">
		<div class="logo">
			<img src="../../image/login/logo.png">
			<div class="comp-name">数据智库操作员管理平台</div>
		</div>
		<div class="login-wrapper">
			<div class="login-banner">
				<img src="../../image/login/login-banner.jpg">
			</div>
			<div class="login-box">
				<h2 class="title">管理员登录</h2>
				<el-form label-width="78px" label-position="right" @submit.native="login">
					<el-form-item label="帐号：">
						<el-input v-model="phone" placeholder="请输入帐户/手机号" @keyup.enter.native="login"></el-input>
					</el-form-item>
					<el-form-item label="密码：">
						<el-input v-model="pwd" type="password" placeholder="请输入密码" @keyup.enter.native="login"></el-input>
					</el-form-item>
					<el-form-item label="验证码：" class="pr">
						<el-input v-model="valid" placeholder="请输入验证码" @keyup.enter.native="login"></el-input>
						<img v-if="randCode" class="verification-code" :src='randCode' @click="changeCode">
					</el-form-item>
					<el-form-item>
						<el-checkbox v-model="checked" name="type">保持我的登录状态</el-checkbox>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" style="width:100%" @click.native="login">登录</el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>
		<div class="footer">浙ICP备11027462号 Copyright @ 2017-2025 eee.net All Rights Reserved</div>
	</div>
</template>

<script>
	import ajax from 'common/ajax.js'
	import ajaxUrls from 'common/ajaxUrls.js'
	import getUrlPara from 'common/getUrlPara.js'
	import sidebar from 'components/layout/sidebar.vue'
	import card from 'components/layout/card.vue'

	let codeUrl = ajaxUrls.apiUrl.user + '?action='+ ajaxUrls.action.randCode;
	export default{
		data(){
			return{
                checked: true,
				randCode: '',
				phone: '',
				pwd: '',
				valid: '',
				loginType: 1
			}
		},
		mounted(){
		    this.changeCode();
		},
		methods: {
			changeCode(){
				this.randCode = codeUrl + '&t=' + (+new Date())
			},
			login(){
			    if(!this.phone){
                    this.$message.error('请输入账号');
                    return;
				}else if(!this.pwd){
                    this.$message.error('请输入密码');
                    return;
                }else if(!this.valid){
                    this.$message.error('请输入验证码');
                    return;
                }
				ajax({
					url: ajaxUrls.apiUrl.sysUser,
					action: ajaxUrls.action.login,
					data: {
						phone: this.phone,
						pwd: this.pwd,
						valid: this.valid,
						loginType: 1
					}
				}).then( data => {
				    if(data.resultCode == 0){
                        let redirectUrl = getUrlPara('redirect') || '/';
                        location.replace(redirectUrl);
					}else{
                        this.$message.error(data.resultMsg);
					}
				})
			}
		},
		components:{
			sidebar,
			card
		}
	}
</script>

<style lang="scss">
	#loginWrap{
		width: 1000px;
		margin: 0 auto;
		padding-top: 30px;
		.logo{
			height: 91px;
			margin-bottom: 10px;
			img	{
				float: left;
			}
			.comp-name {
				margin-left: 85px;
				font-size: 24px;
				color: #2196f3;
				line-height: 91px;
			}
		}
		.login-wrapper{
			position: relative;
			background-color: #fff;
			&::before{
				content: '会员登录';
				box-sizing: border-box;
				position: absolute;
				top: 0;
				right: -8px;
				width: 101px;
				height: 43px;
				font-size: 14px;
				line-height: 35px;
				color: #fff;
				padding-left: 18px;
				background: url("../../image/login/label-bg.png") no-repeat 0 0;
			}
			&::after{
				content: '';
				position: absolute;
				left: 0;
				bottom: -19px;
				width: 1000px;
				height: 19px;
				background: url("../../image/login/box-shadow.png") no-repeat 0 0;
			}
		}
		.login-box{
			box-sizing: border-box;
			position: absolute;
			top: 0;
			right: 0;
			width: 472px;
			padding: 30px 72px 0 0;
			.title{
				padding-left: 80px;
				font-size: 26px;
				color: #1d3655;
				line-height: 78px;
				text-align: center;
			}
		}
		.footer{
			margin-top: 30px;
			font-size: 12px;
			color: #919191;
			line-height: 20px;
			text-align: center;
		}
		.pr{
			position: relative;
		}
		.verification-code{
			position: absolute;
			top: 5px;
			right: 10px;
			cursor: pointer;
		}
	}
</style>